<template>
  <div class="bb-bg">
    <div class="co-title">
      <div class="co-title-name">
        <img src="@/assets/cockpit/subdivision/gdbh-text-gmjg.png" alt="" />
      </div>
      <div class="co-title-right">
        <div class="right-text">单位：万公顷</div>
      </div>
    </div>
    <ul class="bpl1-stac">
      <li class="bpl1-st-each">
        <i class="bpl1-ste-icon"><img src="@/assets/cockpit/subdivision/co-icon-zmj.png" alt=""/></i>
        <div class="bpl1-ste-word">
          <h6>耕地面积</h6>
          <p>27.35</p>
        </div>
      </li>
      <div class="col-line"></div>
      <li class="bpl1-st-each">
        <i class="bpl1-ste-icon"><img src="@/assets/cockpit/subdivision/co-icon-ghps.png" alt=""/></i>
        <div class="bpl1-ste-word">
          <h6>耕地保有量面积</h6>
          <p>27.35</p>
        </div>
      </li>
      <div class="col-line"></div>

      <div class="fy-area">
        <div class="text-area">
          <div class="text-icon text-icon-yellow"></div>
          <div class="text">富裕值</div>
        </div>
        <div class="num">
          0.60
        </div>
      </div>
    </ul>

    <div class="row-line"></div>
    <div class="bpl-container">
      <div class="lf">
        <p class="title">2021年度各县区市耕地面积情况</p>
        <div class="pq-echart-box" id="gmjgEchart"></div>
      </div>
      <div class="rg">
        <div class="floorage-tabs">
          <div :class="isActive === 1 ? 'active' : ''" @click="clickActive(1)">地区详情</div>
          <div :class="isActive === 2 ? 'active' : ''" @click="clickActive(2)">年份对比</div>
        </div>
        <div class="item">
          <div class="icon icon1"></div>
          <div class="text">水地</div>
        </div>
        <div class="item">
          <div class="icon icon2"></div>
          <div class="text">旱地</div>
        </div>
        <div class="item">
          <div class="icon icon3"></div>
          <div class="text">水浇地</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import echarts from 'echarts'

@Component({
  name: 'LandProtectionItem1',
  components: {}
})
export default class LandProtectionItem1 extends Vue {
  private isActive = 1
  clickActive(type: number) {
    this.isActive = type
  }
  initVillage3() {
    const myChart = echarts.init(document.getElementById('gmjgEchart') as HTMLElement)
    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      label: {
        color: '#ffffff'
      },
      grid: {
        top: '4%',
        left: '0%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        // data: ['2017', '2018', '2019', '2020', '当前'],
        data: ['芙蓉区', '天心区', '开福区', '岳麓区', '雨花区', '望城区', '长沙县', '宁乡市', '浏阳市'],
        //设置网格线颜色
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#254177'
          }
        },
        axisLabel: {
          show: true,
          interval: 0,
          rotate: 40,
          textStyle: {
            color: '#ffffff', //更改坐标轴文字颜色
            fontSize: 10 //更改坐标轴文字大小
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#ffffff', //更改坐标轴文字颜色
            fontSize: 12 //更改坐标轴文字大小
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#223e75'],
            width: 1,
            type: 'solid'
          }
        },
        // y轴轴线颜色
        axisLine: {
          lineStyle: {
            color: '#254177',
            width: 0 //这里是坐标轴的宽度
          }
        }
      },
      series: [
        {
          name: '水田',
          type: 'bar',
          barWidth: '50%',
          stack: '使用情况',
          emphasis: {
            focus: 'series'
          },
          data: [5, 20, 36, 10, 10, 20, 10, 10, 20],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#3DC8FC'
              },
              {
                offset: 0.5,
                color: '#1C96EF'
              },
              {
                offset: 1,
                color: '#245ABF'
              }
            ])
          },
          showBackground: false,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        },
        {
          data: [68, 77, 13, 44, 16, 79, 77, 13, 44],
          name: '旱地',
          type: 'bar',
          barWidth: '50%',
          stack: '使用情况',
          emphasis: {
            focus: 'series'
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#2EFFAF'
              },
              {
                offset: 0.5,
                color: '#00FFAA'
              },
              {
                offset: 1,
                color: '#21C18B'
              }
            ])
          },
          showBackground: false,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        },
        {
          data: [5, 20, 36, 10, 10, 20, 77, 13, 44],
          name: '水浇地',
          type: 'bar',
          barWidth: '50%',
          stack: '使用情况',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#FFEB7B'
              },
              {
                offset: 0.5,
                color: '#ECBF45'
              },
              {
                offset: 1,
                color: '#AB9700'
              }
            ])
          },
          showBackground: false,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    })
  }
  mounted() {
    this.initVillage3()
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';
.bb-bg {
  width: 100%;
  height: 100%;
  padding: 12px 12px 12px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  &::before {
    content: '';
    display: block;
    width: 20px;
    height: 103%;
    background: url('~@/assets/cockpit/bpl-bg-line.png') no-repeat 0/ 100% 100%;
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translate(0, -50%);
  }
  .bpl-container {
    padding-top: 8px;
    overflow-x: hidden;
  }
}
.bb4-main {
  width: 100%;
  position: relative;
  z-index: 1;
}
.right-text {
  font-size: 12px !important;
  color: #dffeff;
}
.bpl1-stac {
  width: 100%;
  display: flex;
  padding: 16px 0 0 0;
  flex-wrap: wrap;
  .fy-area {
    width: 78px;
    height: 64px;
    flex-shrink: 0;
    color: #fff;
    border-radius: 0 12px;
    background: rgba(255, 255, 255, 0.05);
    .text-area {
      display: flex;
      margin: 10px 10px 5px 10px;
      .text {
        font-size: 12px !important;
        color: #bffeff;
        margin-left: 6px;
      }
    }
    .num {
      font-size: 24px !important;
      color: #fff;
      margin-left: 22px;
    }
  }
  .bpl1-st-each {
    flex: 1;
    display: flex;
    .bpl1-ste-icon {
      flex: none;
      width: 64px;
      height: 64px;
      > img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .bpl1-ste-word {
      flex: none;
      > h6 {
        font-size: 12px !important;
        line-height: 18px;
        color: #bffeff;
        text-align: left;
        font-weight: 400;
        margin: 6px 0 0 0;
      }
      > p {
        font-size: 24px !important;
        line-height: 30px;
        color: #fff;
        text-align: left;
        font-weight: 500;
        margin: 4px 0 0 0;
      }
    }
    .bpl1-ste-chart {
      flex: none;
      width: 64px;
      height: 64px;
      padding: 2px;
      position: relative;
      margin: 0 0 0 12px;
      .bpl1-ste-chart-base {
        width: 100%;
        height: 100%;
      }
      .bpl1-ste-chart-word {
        width: 80%;
        position: absolute;
        left: 10%;
        top: 50%;
        transform: translate(0, -50%);
        > h6 {
          font-size: 16px !important;
          text-shadow: 0 0 4px #00ffaa;
          color: #fff;
          line-height: 20px;
          text-align: center;
        }
        > p {
          font-size: 12px !important;
          line-height: 14px;
          color: #bffeff;
          text-align: center;
        }
      }
    }
  }
  .bpl1-st-line {
    flex: none;
    width: 1px;
    height: 64px;
    background: rgba(#fff, 0.1);
    margin: 0 4px;
  }
}

.bpl-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
  margin-top: 8px;
  .lf {
    flex: 5;

    .title {
      font-size: 14px !important;
      color: #dffeff;
    }
    .pq-echart-box {
      width: 100%;
      height: 140px;
      margin-top: 22px;
    }
  }
  .rg {
    flex: 1;
    margin-top: 40px;
    position: relative;

    .item {
      display: flex;
      margin-top: 16px;
      margin-left: 12px;
      .icon {
        width: 6px;
        height: 6px;
        margin-top: 4px;
        transform: rotate(45deg);
        -ms-transform: rotate(45deg); /* IE 9 */
        -moz-transform: rotate(45deg); /* Firefox */
        -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
        -o-transform: rotate(45deg); /* Opera */
      }
      .icon1 {
        background: linear-gradient(180deg, #3dc8fc 0%, #1c96ef 50%, #245abf 100%);
      }
      .icon2 {
        background: linear-gradient(180deg, #2effaf 0%, #0fa 50%, #21c18b 100%);
      }
      .icon3 {
        background: linear-gradient(180deg, #ffeb7b 0%, #ecbf45 50%, #ab9700 100%);
      }
      .text {
        font-size: 12px !important;
        color: #dffeff;
        margin-left: 8px;
      }
    }
  }
}
.floorage-tabs {
  position: absolute;
  top: -60px;
  right: 0;
  font-size: 14px !important;
  text-align: center;
  color: #fff;
  display: flex;
  margin: 15px auto 6px auto;
  .active {
    color: #fff;
    font-weight: 500;
    font-size: 14px !important;
    background: url('~@/assets/cockpit/subdivision/text-bg.png') no-repeat 0/ 100% 100%;
    opacity: 1 !important;
  }
  div {
    width: 85px;
    height: 26px;
    line-height: 26px;
    background: rgba(0, 0, 0, 0.15);
    opacity: 0.7;
    cursor: pointer;
  }
}
.col-line {
  width: 1px;
  height: 64px;
  background: rgba(255, 255, 255, 0.1);
  margin: 1px 10px 0 10px;
  flex-shrink: 0;
}
.row-line {
  width: 98%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 14px auto 0 auto;
}
</style>
